import React from 'react';

import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { useMetaTag } from '@/shared/lib/hooks';
import { useAppSelector } from '@/shared/store';
import { Button, ButtonVariants, Snackbar, Title } from '@/shared/ui';
import { ModalPage } from '@/widgets/ModalPage';
import { useSnackbar } from 'notistack';
import { useWindowSize } from 'usehooks-ts';

import { getUserProfile } from '../../model/selectors';
import { TarfixBox } from '../TarfixBox';
import cs from './TarifPlans.module.scss';

export const TarifPlans = () => {
  const { closeModal, openModal } = React.useContext(ModalContext);
  const { isPremium } = useAppSelector(getUserProfile);
  const { width } = useWindowSize();
  const [active, setActive] = React.useState<'year' | 'month'>('year');

  const { enqueueSnackbar } = useSnackbar();

  const changeTarif = () => {
    closeModal();
    enqueueSnackbar('Тариф изменён', {
      variant: 'success',
      content: (key, message) => <Snackbar id={key} message={message} size="md" variant="success" />,
    });
  };

  const content = () => (
    <>
      <section>
        <Title size="modal-size">{isPremium ? 'Изменить тариф' : 'Выберите тариф'}</Title>
        <Title size="xs" tag="p">
          {width > 1024 ? (
            'Активируется после окончания действующей подписки'
          ) : (
            <p>
              Активируется после окончания<br></br>действующей подписки
            </p>
          )}
        </Title>
      </section>
      <TarfixBox active={active} setActive={setActive} />
      <Button className={cs.btn} onClick={() => changeTarif()} variant={ButtonVariants.Green}>
        {isPremium ? 'Изменить' : 'Выбрать'}
      </Button>
    </>
  );

  return (
    <ModalPage
      className={cs.container}
      handleClose={() => closeModal()}
      handleGoBack={() => (isPremium ? openModal(Modals.ChangeTarif) : closeModal())}
      isOpen
      withGoBack={isPremium}
    >
      {content()}
    </ModalPage>
  );
};
